<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人中心 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/sPersonal.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>

</head>
<body>

<div class="headerpage"></div>

<!------------------------- 背景图片 ---------------------->

<div class="content-back">
    <c:choose>
        <c:when test="${empty sessionScope.SUserInfo.simg }">
            <img class="back-pic" src="/img/logo.png">
        </c:when>
        <c:otherwise>
            <img class="back-pic" src="${sessionScope.SUserInfo.simg }">
        </c:otherwise>
    </c:choose>
</div>

<!----------------------------- 内容区 ----------------------------->

<div class="content">
    <div class="content-kuang">
        <c:choose>
            <c:when test="${!empty sessionScope.SUserInfo.simg }">
                <img src="${sessionScope.SUserInfo.simg }" class="kuang-img">
                <form action="supdate.action" method="post" id="img-update" enctype="multipart/form-data">
                    <input type="hidden" name="sid" value="${ sessionScope.SuserInfo.sid }">
                    <input type="file" name="myfile" class="img-update">
                    <img src="/img/camera.png" class="camera">
                </form>
            </c:when>
            <c:otherwise>
                <img src="/img/logo.png" class="kuang-img">
                <form action="supdate.action" method="post" id="img-update" enctype="multipart/form-data">
                    <input type="hidden" name="sid" value="${ sessionScope.SuserInfo.sid }">
                    <input type="file" name="img" class="img-update">
                    <img src="/img/camera.png" class="camera">
                </form>
            </c:otherwise>
        </c:choose>
        <span class="name">用户名：${sessionScope.SUserInfo.sname }</span>
        <div class="marker-update"></div>
        <form>
            <input type="hidden" name="sid" value="${ sessionScope.SUserInfo.sid }">
            <div class="sname">
                <span class="keep-name">用户名：</span>
                <input class="sname-input" type="text" name="sname" placeholder="请输入新的用户名">
            </div>
        </form>
        <div class="keep"></div>
    </div>
</div>

<div class="center">
    <div class="center-kuang">
        <ul class="center-ul">
            <li class="focus  data">
                <a style="font-size:19px;">个人信息</a>
            </li>
            <li class="blur  update">
                <a style="font-size:19px;">修改信息</a>
            </li>
            <li class="blur">
                <a href="sUpdate" style="font-size:19px;">修改密码</a>
            </li>


        </ul>
    </div>
</div>
<div class="message">
    <div class="message-content">

        <div class="message-phone" style="top:0px;left:170px">
            手机号码:
        </div>

        <div class="phone" style="top:0px;left:360px">
            ${ sessionScope.SUserInfo.sphone }
        </div>

        <div class="message-phone" style="top:70px;left:170px">
            地区:
        </div>

        <div class="phone" style="top:70px;left:360px">
            <c:choose>
                <c:when test="${empty sessionScope.SUserInfo.saddress}">
                    <span class="click">点击这里添加地址</span>
                </c:when>
                <c:otherwise>
                    ${ sessionScope.SUserInfo.saddress }
                </c:otherwise>
            </c:choose>

        </div>

        <div class="message-phone" style="top:140px;left:170px">
            性别:
        </div>

        <div class="phone" style="top:140px;left:360px">
            <c:choose>
                <c:when test="${empty sessionScope.SUserInfo.sgender}">
                    <span class="click">点击这里添加性别</span>
                </c:when>
                <c:otherwise>
                    ${ sessionScope.SUserInfo.sgender }
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<div class="updatemessage">
    <div class="update-content">
        <form action="supdate.action" method="post" id="update">
            <input type="hidden" name="sid" value="${ sessionScope.SuserInfo.sid }">
            <div class="update-phone" style="top:0px;left:170px">
                手机号码:
            </div>
            <div class="update-pho" style="top:0px;left:360px">
                <input type="text" class="input" placeholder="${ sessionScope.SUserInfo.sphone }">

            </div>

            <div class="update-phone" style="top:70px;left:170px">
                地区:
            </div>
            <div class="update-pho" style="top:70px;left:360px">
                <input type="text" class="input" placeholder="${ sessionScope.SUserInfo.saddress }">

            </div>

            <div class="update-phone" style="top:140px;left:170px">
                性别:
            </div>
            <div class="update-pho" style="top:140px;left:360px">
                <c:choose>
                    <c:when test="${ sessionScope.SUserInfo.sgender =='女' }">
                        男<input type="radio" value="男" name="sgender" class="radio" >
                        女<input type="radio" value="女" name="sgender" class="radio" checked>
                    </c:when>
                    <c:otherwise>
                        男<input type="radio" value="男" name="sgender" class="radio" checked>
                        女<input type="radio" value="女" name="sgender" class="radio">
                    </c:otherwise>
                </c:choose>
            </div>

        </form>
        <button type="button" class="btn-update">保存</button>
    </div>
</div>
<div class="footerpage"></div>
<script>

    $(function () {

        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");

        $(".center-ul li").mouseover(function () {

            $(".center-ul li").removeClass("focus").addClass("blur");
            $(this).removeClass("blur").addClass("focus");

        })

        $(".data").click(function () {
            $(".message").css("display", "block");
            $(".updatemessage").css("display", "none");
        })

        $(".update").click(function () {
            $(".updatemessage").css("display", "block");
            $(".message").css("display", "none");
        })

        $(".click").click(function () {
            $(".updatemessage").css("display", "block");
            $(".message").css("display", "none");
        })

        $(".marker-update").click(function () {
            $(".keep").css("display", "block");
            $(".sname").css("display", "block");
            $(".keep-name").css("display", "block");
            $(".marker-update").css("display", "none");
            $(".name").css("display", "none");
        })


        $(".btn-update").click(function () {

            $("#update").submit();

        })

        $(".keep").click(function () {
            $.ajax({
                type: 'post',
                url: 'updateSname.action',
                data: {
                    "sname": $("[name='sname']")[0].value,
                    "sid": $("[name='sid']")[0].value

                },

                contentType: "application/x-www-form-urlencoded",

                dataType: 'text',

                success: function (data) {
                    layer.alert(data, {
                        skin: 'layui-layer-molv'
                        , closeBtn: 0, anim: 4
                    });
                },

                error: function (data) {
                    console.log("请求失败");
                }


            })

        })

        $("img-update").click(function () {
            $("#img-update").submit();
        })


        $(".img-update").mouseover(function () {
            $(".camera").css("opacity", "0.9");
        })

        $(".img-update").mouseout(function () {
            $(".camera").css("opacity", "0");
        })


    })


    var input = document.getElementsByName("myfile")[0];

    var div = document.getElementsByClassName("camara")[0];

    input.onchange = function () {
        var file = input.files[0];
        if (window.createObjectURL) {
            div.style.backgroundImage = "url(" + window.createObjectURL(file) + ")";
            div.style.color = "transparent";
        } else if (window.webkitURL.createObjectURL) {
            div.style.backgroundImage = "url(" + window.webkitURL.createObjectURL(file) + ")";
            div.style.color = "transparent";
        } else if (window.URL.createObjectURL) {
            div.style.backgroundImage = "url(" + window.URL.createObjectURL(file) + ")";
            div.style.color = "transparent";
        }
    }
</script>


</body>
</html>